<template>
  <el-dialog append-to-body title="被授权成员" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'480px'">
    <div>拥有权限组<span v-show="title">“{{title}}”</span>的成员如下：</div>
    <el-table stripe :data="pageData" :header-cell-style="tableHeaderStyle" v-loading="loading" class="margin_top_20">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="depNames" label="部门"></el-table-column>
    </el-table>
    <div class="text-center">
        <br>
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
        </el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button :disabled="submitLoading" @click="closeModal()">取消</el-button> -->
      <el-button type="primary" :loading="submitLoading" @click="closeModal()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Setting from '@/settings';
import { ReturnRoleUsers } from '@/views/user-management/services/index';
export default {
  props: ['visible', 'permissionId', 'title'],
  data() {
    return {
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageData: [],
      pageCount: 0,
      loading: false,
      submitLoading: false
    }
  },
  watch: {
    permissionId: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return;
        this.getPageDataList();
      }
    }
  },
  methods: {
    closeModal() {
      this.$emit('update:visible', false);
    },
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getPageDataList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getPageDataList();
    },
    getPageDataList() {
      this.loading = true;
      ReturnRoleUsers({
        roleId: this.permissionId,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      })
        .finally(() => (this.loading = false))
        .then(data => {
          if (data.code == 200) {
            this.pageData = data.data.list;
            this.pageCount = data.data.total;
          }
        })
    }
  }
}
</script>
